<script>

import {getUser, updateAvatar, updateUser} from "@/api/user";
import {createOrder} from "@/api/order";
import {pay} from "@/api/patient";

export default {
  name: "Person",
  data() {
    return {
      props: {
        expandTrigger: 'hover',
        checkStrictly: true,
        label: 'name',
        value: 'name',
        children: 'childrenList'
      },
      province: '',
      city: '',
      area: '',
      street: '',
      data: [],
      value: [],
      form: {},
      rechargeForm:{
        patientId: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).patientId : null,
        amount:0,
        type:'1'
      },
      dialogFormVisible:false,
      headers:{token:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).token:null},
      avatarUrl: this.baseUrl+"/file/upload",
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  mounted() {
    this.$http.get("/resource/city.json").then(res=>{
      if(res.status===200) {
        this.data = res.body;
      }
    });
  },
  created() {
    this.getUser().then(res => {
      res.token = JSON.parse(localStorage.getItem("user")).token;
      localStorage.setItem("user", JSON.stringify(res));
      console.log(res);
      this.form = res;
    })
  },
  methods: {
    handleAvatarSuccess(res) {
      this.form.avatar = res.data;
      console.log(res.data)
        let params={
          userName: this.form.userName,
          avatar: this.form.avatar
        };
     updateAvatar(params).then(res => {
        if (res.code === 200) {
          this.$emit("refreshUser");
          this.$message({
            type: "success",
            message: "头像上传成功",
            center: true
          })
        } else {
          this.$message({
            type: "error",
            message: res.code,
            center: true
          })
        }
      })

    },
    handleChange(value) {
      if (value[0] === '北京' || value[0] === '天津' || value[0] === '上海' || value[0] === '重庆') {
        this.province = value[1];
        this.area = value[2];
        this.street = value[3];
      } else {
        this.province = value[0];
        this.city = value[1]
        this.area = value[2];
        this.street = value[3];
      }
      if (value[0] === '台湾' || value[0] === '香港特别行政区' || value[0] === '澳门特别行政区') {
        this.form.address = this.province + this.city + this.area;
      } else {
        this.form.address = this.province + this.city + this.area + this.street;
      }
    },
    beforeAvatarUpload(file) {
      const isJPGORPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPGORPNG) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPGORPNG && isLt5M;
    },
    async getUser() {
      return (await getUser(this.user.userName)).data;
    },
    save() {
      updateUser( this.form).then(res => {
        if (res.code == 200) {
          this.getUser().then(res => {
            res.token = JSON.parse(localStorage.getItem("user")).token;
            localStorage.setItem("user", JSON.stringify(res));
          })
          this.$emit("refreshUser");
          this.$router.go(0);
        }
      })
    },
    recharge(){
         createOrder(this.rechargeForm).then(res=>{
           if(res.code==200) {
             let paymentDTO=res.data;
             console.log(paymentDTO);
             this.dialogFormVisible=false;
             pay(paymentDTO).then(res => {
               if(res.code==200){
                 document.write(res.data);
               }
             })
           }
         })
    }
  },
  computed:{
    sex(){
      if(this.user.sex==='0'){
        return '男';
      }else if(this.user.sex==='1'){
        return '女';
      }else{
        return '秘密';
      }
    }
  }
}
</script>

<template>
  <div style="display: flex">
    <el-card style="width:350px;margin-right: 20px">
      <div slot="header">
        <span>个人信息</span>
      </div>
      <div>
        <el-upload
            class="avatar-uploader"
            :action="avatarUrl"
            :headers="headers"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess">
          <img v-if="form.avatar" :src="form.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <ul>
          <li><i class="el-icon-user-solid"></i>用户名称
            <div class="pull-right">{{ user.userName }}</div>
          </li>
          <li><i class="el-icon-user"></i>用户昵称
            <div class="pull-right">{{ user.nickName }}</div>
          </li>
          <li><i class="el-icon-cherry"></i>用户性别
            <div class="pull-right">{{ sex}}</div>
          </li>
          <li><i class="el-icon-mobile"></i>手机号码
            <div class="pull-right">{{ user.phonenumber }}</div>
          </li>
          <li v-if="user.account"><i class="el-icon-s-finance"></i>账户余额
            <div class="pull-right">{{ user.account }}医币</div>
          </li>
          <li><i class="el-icon-user-solid"></i>用户邮箱
            <div class="pull-right">{{ user.email }}</div>
          </li>
          <li><i class="el-icon-position"></i>联系地址
            <div class="pull-right">{{ user.address }}</div>
          </li>
        </ul>
      </div>
    </el-card>
    <el-card style="width:500px;flex: 1">
      <div slot="header">
        <span>基本资料</span>
      </div>
      <el-form label-width="80px" size="small">
        <!--  <el-upload-->
        <!--      class="avatar-uploader"-->
        <!--      action="http://localhost:8088/file/upload"-->
        <!--      :show-file-list="false"-->
        <!--      :before-upload="beforeAvatarUpload"-->
        <!--      :on-success="handleAvatarSuccess">-->
        <!--    <img v-if="form.avatar" :src="form.avatar" class="avatar">-->
        <!--    <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
        <!--  </el-upload>-->
        <el-form-item label="用户昵称">
          <el-input v-model="form.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="form.sex">
            <el-radio :label="'0'">男</el-radio>
            <el-radio :label="'1'">女</el-radio>
            <el-radio :label="'2'">保密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-cascader v-model="value" :options="data" :props="props" style="width: 320px" separator="/"
                       @change="handleChange"></el-cascader>
          <el-input v-model="form.address" type="textarea" autocomplete="off" style="margin-top: 10px"
                    placeholder="具体到门牌号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="medium" @click="dialogFormVisible=true" v-if="user.account">账户充值</el-button>
          <el-button type="primary" size="medium" @click="save">保存修改</el-button>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="dialogFormVisible" title="医币充值" width="20%" center>
        <el-form :model="rechargeForm" label-width="80px" style="width:300px;font-weight: bolder">
          <el-form-item label="充值额度">
            <el-input v-model="rechargeForm.amount" autocomplete="off" style="width: 80px"></el-input><span style="font-weight: normal">医币(￥{{rechargeForm.amount}})</span>
          </el-form-item>
          <el-form-item label="支付平台" >
          <el-image style="width:80px;height:30px" :src="require('@/assets/alipayLogo.png')" ></el-image>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="recharge">充值</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<style scoped>
ul li {
  clor: #606266;
  font-size: 13px;
  list-style-type: none;
  border-bottom: 1px solid rgb(220, 223, 230);
  line-height: 40px;
}

.pull-right {
  float: right !important;
}

/deep/ .avatar-uploader {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgb(220, 223, 230);
}

/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/.avatar-uploader el-upload:hover {
  border-color: #409EFF;
}

/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

/deep/ .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
